<template>
  <h1>CourseManage List</h1>
  <el-card>
    <h1>课程列表</h1>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="课程名称：">
        <el-input
            v-model="queryParams.courseName"
            placeholder="请输入课程名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="状态：" style="width: 200px">
        <el-select v-model="queryParams.status" placeholder="请选择状态">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="上架" :value="1"></el-option>
          <el-option label="下架" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCourseList" icon="search" >查询</el-button
        >
        <el-button type="primary" plain @click="onReset" icon="refresh" >重置</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="plus" @click="handleAddCourse">添加课程</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-table :data="courseList" border style="width: 100%"> -->
    <el-table :data="queryResult.records" border style="width: 100%">
      <el-table-column
          v-for="course in courseTable"
          :key="course.prop"
          :prop="course.prop"
          :label="course.label"
          :width="course.width"
          :align="course.align"
      >
      </el-table-column>
      <el-table-column :label="'课程状态'" align="center">
        <el-switch
            class="mb-2"
            inline-prompt
            v-model="queryParams.status"
            :active-value="1"
            :inactive-value="0"
            inactive-text="下架"
            active-text="上架"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="success" icon="edit" @click="handleEditCourse(scope.row)">编辑</el-button>
        <el-button type="primary">内容管理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="mt-20"
        @size-change="onPageSizeChange"
        @current-change="onCurrentPageChange"
        :current-page="queryParams.currentPage"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50,80, 100]"
        :total="queryResult.total"
        layout="total, prev, pager, next, sizes, jumper"
    />
  </el-card>

  <!--  弹窗组件1-->
  <el-dialog v-model="dialogVisible" title="添加课程" width="50%" draggable>
    <Dialog @close="dialogVisible = false" />
  </el-dialog>

  <!--  弹窗组件2-->
  <Dialog2 v-model="visible" @close="closeDialog" :course="selectedCourse" />


</template>

<script setup>
import {ref,reactive, onMounted} from "vue";
import {useRouter} from "vue-router";
import {getCourses} from "@/api/course";
import Dialog from "@/views/course/edit/dialog1.vue";
import Dialog2 from "@/views/course/edit/dialog2.vue";
import {ElMessage} from "element-plus";

const router = useRouter();
const dialogVisible = ref(false);
const visible = ref(false);
const selectedCourse = reactive({}); // 新增：用于存储当前编辑的课程信息

// 查询参数
const queryParams = ref({
  courseName: "",
  currentPage: 1,
  pageSize: 15,
  status: 1,
});

// 课程列表
const queryResult = ref({});

// 课程表头
const courseTable = [
  {prop: "id", label: "课程ID", width: "100px", align: "center"},
  {prop: "courseName", label: "课程名称", align: "center"},
  {prop: "price", label: "课程价格", align: "center"},
  {prop: "sortNum", label: "课程排序", align: "center"},
];

onMounted(() => {
  getCourseList();
})

// 获取并查询展示课程列表
const getCourseList = () => {
  const result = getCourses(queryParams.value);
  result.then((res) => {
    if (res.data.code === "000000") {
      const { current: currentPage, pages, records, size: pageSize, total } = res.data.data; // 解构赋值
      Object.assign(queryParams.value, {currentPage, pageSize}); // 合并对象
      queryResult.value = { pages, records, total };
    } else {
      ElMessage.error("加载课程信息失败");
    }
  });
}

// 重置查询条件
const onReset = () => {
  queryParams.value.courseName = "";
  queryParams.value.currentPage = 1;
  queryParams.value.status = 1;
  getCourseList();
}

// 分页器改变页数
const onPageSizeChange = (size) => {
  queryParams.value.pageSize = size;
  getCourseList();
}

// 分页器改变页数
const onCurrentPageChange = (page) => {
  queryParams.value.currentPage = page;
  getCourseList();
}

// 打开编辑弹窗，并将选中的课程信息传递给Dialog2
const handleEditCourse = (row) => {
  // 将当前行数据赋值给selectedCourse
  Object.assign(selectedCourse, row);
  visible.value = true;
}

// 关闭编辑弹窗
const closeDialog = () => {
  visible.value = false;
}

// 打开添加弹窗
const handleAddCourse = () => {
  dialogVisible.value = true;
}


</script>

<style></style>